<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>js_12</title>

		<script type="text/javascript">
			//测试replaceChild方法
			window.onload = function() {

				alert(1);

				var bjNode = document.getElementById("bj");
				var rlNode = document.getElementById("rl");

				replaceEach(bjNode, rlNode);

				//				var cityNode = document.getElementById("city");
				//				//cityNode.replaceChild(rlNode, bjNode);
				//
				//				//实现bj节点和rl节点互换
				//				//cloneNode(deep)若deep为true，则可以克隆子节点
				//				var gameNode = document.getElementById("game");
				//				var bjNode2 = bjNode.cloneNode(true);
				//				gameNode.replaceChild(bjNode2, rlNode);
				//				cityNode.replaceChild(rlNode, bjNode);

			}

			/**
			 * 自定义互换两个节点的函数
			 * 
			 * @param {Object} aNode
			 * @param {Object} bNode
			 */
			function replaceEach(aNode, bNode) {
				//1.获取aNode和bNode的父节点，使用parentNode属性
				var aParent = aNode.parentNode;
				var bParent = bNode.parentNode;

				if(aParent && bParent) {
					//2.克隆aNode或bNode
					var aNode2 = aNode.cloneNode(true);
					//3.分别调用aNode的父节点和bNode的父节点的replaceChild()方法实现节点的互换
					bParent.replaceChild(aNode2, bNode);
					aParent.replaceChild(bNode, aNode);
				}

			}
		</script>

	</head>

	<body>
		<p>你喜欢哪个城市？</p>
		<ul id="city">
			<li id="bj" name="BeiJing">北京</li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>
		<br/><br/>
		<p>你喜欢哪款单机游戏</p>
		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>
		<br /><br /> gender:
		<input type="radio" name="gender" id="gender" value="male" />Male
		<input type="radio" name="gender" id="gender" value="female" />Female

		<br/><br/> name:
		<input type="text" name="username" id="name" value="idea" />
	</body>

</html>